<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>医院诊疗系统</title>
  <link rel="stylesheet" href="../css/layui.css">
  <script src="../layui.js"></script>
  <script src="../js/jquery-3.5.1.js"></script>
</head>
<body>
  <div class="layui-layout layui-layout-admin">
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">医院诊疗系统</div>
      
      <ul class="layui-nav layui-layout-left">
        <!-- 移动端显示 -->
        <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
          <i class="layui-icon layui-icon-spread-left"></i>
        </li>

        <li class="layui-nav-item layui-hide-xs layui-this"><a href="">费用管理</a></li>

      </ul>
  
  
  
      <!-- 右上角导航栏 -->
      <ul class="layui-nav layui-layout-right">
          
        <div class="layui-nav-item layui-hide layui-show-md-inline-block" style=" text-align: center; 
          display: inline-block; line-height: 42px; height: 42px; width: 25px; ">
          <div id="red-spot" style="position:absolute ;top: 1px; right: -7px; width: 4px; height: 4px; border: 0.5px solid red;
          background-color: red; border-radius: 50%;"></div>
          <i id="notice" class="layui-icon layui-icon-notice" style="font-size: 20px; color:rgba(255, 255, 255, .7);"></i>
          <!-- <span class="layui-badge-dot" style=" border: 0.5px; position: relative;top:-62px; right: -15px; "></span> -->
        </div>
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
          <a href="javascript:;">
            <img src="../image/gly.jpg" class="layui-nav-img">
            管理员
          </a>
          <dl class="layui-nav-child">
            <dd><a href="">修改密码</a></dd>
            <dd><a id="edit">编辑信息</a></dd>
            <dd><a href="">退出登录</a></dd>
          </dl>
        </li>
        
      </ul>
      <!-- 右上角导航栏 -->
      
    </div>
    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
      
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item layui-this">
            <a class="" href="medical_card.html">医疗卡管理</a>
            
          </li>
          <li class="layui-nav-item ">
            <a href="out_patient_charges.html">门诊收费</a>
          </li>
          <li class="layui-nav-item ">
            <a href="return_premium.html">门诊退费</a>
          </li>
          <li class="layui-nav-item ">
            <a href="day_chosing_cost.html">费用日结</a>
          </li>
        </ul>


      </div>
    </div>
  <!-- 左侧导航区域（可配合layui已有的垂直导航） -->

    
    <!-- 内容主体区域 -->
  <div class="layui-body" style="padding: 15px;">

    <!-- 面包屑 -->

    <div style=" padding: 15px;  background-color: #ffffff; border: solid #eeeeee 1px; box-shadow: inset 0 0 10px rgba(255, 255, 227, 0.925);">
      <fieldset class="layui-elem-field layui-field-title" style="margin: 0; border-top: none; padding: 0;height: 25px;line-height: 25px;">
        <span class="layui-breadcrumb" >
            <a href="/">费用管理</a>
            <a><cite>医疗卡管理</cite></a>
        </span>
      </fieldset>
    </div>

    <!-- 面包屑 -->
    <table id="currentTableId"></table>

    <div id="inputCard" style="display:none; width: 957px; padding-left: 22px; padding-right: 20px;">
      <hr>
      <div class="layui-form-item" style="text-align: center;">
        <div class="demo">
          <div class="layui-inline">
            <input class="layui-input" name="card" id="card" placeholder="医疗卡号" style="width: 200px;display: inline;">
          </div>
          <button class="layui-btn" id="inCard" style="display: inline;height: 38px;">确认</button>
        </div>
      </div>
    </div>

    <div id="selectBalance" style="display:none; width: 957px; padding-left: 22px; padding-right: 20px;">
      <hr>
      <div style="margin: 10px 60px; background-color:  rgb(242, 249, 255)">
        <div class="layui-row" >
          <div class="layui-row" >
            <div class="layui-col-xs4 layui-col-md-offset3">
              <span>姓名:</span>
              <span id="yh_name"></span>
            </div>
            <div class="layui-col-xs4">
              <span>性别:</span>
              <span id="br_sex"></span>
            </div>
          </div>
          <div class="layui-row">
            <div class="layui-col-xs4 layui-col-md-offset3">
              <span>卡号:</span>
              <span id="br_card"></span>
            </div>
            <div class="layui-col-xs4">
              <span>余额:</span>
              <span id="br_balance">￥</span>
            </div>
          </div>
        </div>

      </div>
      <hr>
      <div id="updateBalance" style="display:none; width: 957px; padding-left: 22px; padding-right: 20px;">
        <blockquote class="layui-elem-quote" style="margin-top: 10px;">
          充值医疗卡
        </blockquote>
        <div class="layui-form-item" style="text-align: center;">
          <div class="demo">
            <div class="layui-inline">
              <input class="layui-input" name="money" id="money" placeholder="充值金额" style="width: 200px;display: inline;">
            </div>
            <button class="layui-btn" id="inMoney" style="display: inline;height: 38px;">确认</button>
          </div>
        </div>
      </div>
      <div id="deleteBalance" style="display:none; width: 957px; padding-left: 22px; padding-right: 20px;">
        <blockquote class="layui-elem-quote" style="margin-top: 10px;">
          注销医疗卡
        </blockquote>
        <div style="text-align: center;">
          <button id="reMoney" class="layui-btn layui-btn-danger"  style="display: inline;height: 38px;">退还余额</button>
        </div>

        <br><br><br>
      </div>


      <!-- 消息框 -->
      <div class="notice_win win" style="display: none;" >
        <div class="win_title">
          <h6 style="display: inline-block; padding-left: 10px;">通知</h6>
          <div style="display: inline-block; text-align: right; width: 200px;">
            <span id="unread-count" style="text-align: right;color: #868686; font-size: 12px;">1</span>
            <span style="text-align: right;color: #868686; font-size: 12px;">条未读通知</span>
          </div>
        </div>
        <ul id="ul-read">
          <div id="unread">
            <div class="to-be-read">
              <li class="win_item">
                <div style="text-align: center; width: 40px; padding: 0; float: left;">
                  <i class="layui-icon layui-icon-username layui-inline" style=" border-radius: 14px 14px 14px 14px ;
            height: 28px; line-height: 28px; width: 28px; background-color: #a0d9ff; color: rgb(0, 134, 196); font-size:20px ;"></i>

                </div>
                <div style="display: inline-block; height: 40;margin: 0;padding-left: 20px; width: 200px;">
                  <p style=" padding-bottom: 5px;">
                    新用户注册
                  </p>
                  <span style=" color: #868686; font-size: 12px;" >
              10分钟前
            </span>
                </div>
              </li>
              <hr style="margin: 0px;">
            </div>
          </div>


          <span style=" color: #868686; font-size: 12px; padding-left: 20px; height: 20px;line-height: 20px;" >已读</span>
          <hr style="margin: 0px;" >
          <div class="have-read">
            <li class="win_item">

              <div style="text-align: center; width: 40px; padding: 0; float: left;">
                <i class="layui-icon layui-icon-user layui-inline"
                   style=" border-radius: 14px 14px 14px 14px ;
          height: 28px; line-height: 28px; width: 28px; background-color: #fcffa0; color: rgb(196, 176, 0); font-size:20px ;"></i>

              </div>
              <div style="display: inline-block; height: 40;margin: 0;padding-left: 20px; width: 200px;">
                <p style=" padding-bottom: 5px;">
                  新病人预约
                </p>
                <span style=" color: #868686; font-size: 12px;">
            10分钟前
          </span>
              </div>
            </li>
            <hr style="margin:0px">
            <li class="win_item">
              <div style="text-align: center; width: 40px; padding: 0; float: left;">
                <i class="layui-icon layui-icon-user layui-inline"
                   style=" border-radius: 14px 14px 14px 14px ;
          height: 28px; line-height: 28px; width: 28px; background-color: #fcffa0; color: rgb(196, 176, 0); font-size:20px ;"></i>

              </div>
              <div style="display: inline-block; height: 40;margin: 0;padding-left: 20px; width: 200px;">
                <p style=" padding-bottom: 5px;">
                  新病人预约
                </p>
                <span style=" color: #868686; font-size: 12px;">
            10分钟前
          </span>
              </div>

            </li>
            <hr style="margin:0px">
            <li class="win_item">
              <div style="text-align: center; width: 40px; padding: 0; float: left;">
                <i class="layui-icon layui-icon-user layui-inline"
                   style=" border-radius: 14px 14px 14px 14px ;
          height: 28px; line-height: 28px; width: 28px; background-color: #fcffa0; color: rgb(196, 176, 0); font-size:20px ;"></i>

              </div>
              <div style="display: inline-block; height: 40;margin: 0;padding-left: 20px; width: 200px;">
                <p style=" padding-bottom: 5px;">
                  新病人预约
                </p>
                <span style=" color: #868686; font-size: 12px;">
            10分钟前
          </span>
              </div>
            </li>
            <hr style="margin:0px">
          </div>

        </ul>
      </div>
      <!-- 消息框 end-->
      <!-- 消息样式 -->
      <style>

        .win{
          padding: 0;
          margin: 0;
        }
        .notice_win{
          width: 300px;
          height: 404px;
          background-color: rgb(253, 255, 249);
          float: none;
          position: fixed;
          top: 61px;
          right: 150px;
          z-index: 999;
          border-radius: 8px;
        }
        .win_line{
          width: 300;
          height: 17;
        }
        .win_item{
          border: 1px;
          padding: 12px;
          width: 274px;
          height: 40px;
        }
        img{
          width: 100%;
        }
        .win_title{
          width: 252;
          padding: 24px;
          background-image: url("../image/image2.png");
          background-size:200% 200%;
          border-radius: 8px 8px 0 0px;
          height: 17px;
          line-height: 17px;
        }
      </style>
      <!-- 消息样式 end-->

    </div>

    <!-- 主体 -->

  </div>

    <!-- 消息处理 -->
    <script>
      $("#notice").on('click',function(){
        $(".notice_win").css('display',"block");
      });
      $("body").click(function(e){
        if((!$(e.target).closest("#notice").length)&&(!$(e.target).closest(".notice_win").length)){
          $(".notice_win").css('display',"none");
        }
      });

      var count = $(".to-be-read").length;
      var flag=count;
      for(var i=0;i<count;i++){
        $("#unread>.to-be-read").eq(i).click(function(e){
          $(".have-read").prepend($("#unread .to-be-read").eq(i-1));
          flag--;
          $("#unread-count").text(flag);
          if(flag==0){
            $("#red-spot").css('display',"none");
          }
        });

      }


    </script>

    <!-- 消息处理 -->




    <!-- 卡片渲染事件 -->
    <script>
      layui.config({
        base: '../mods/extend/' //配置 layui 第三方扩展组件存放的基础目录
      }).extend({
        cardTable: 'cardTable/cardTable'
      }).use(['table','layer', 'form', 'jquery', 'cardTable'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let cardTable = layui.cardTable;

        cardTable.render({
          elem: '#currentTableId',
          linenum: 3, //每行数量 2,3,4,6
          page: false, //是否分页
          //, imageName: 'image' //图片地址，默认：image
          //此为动态
          //url: '/card.json',
          //此为静态
          data:[{
            "id": "card1",
            "image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
            "title": "查询余额",
            "remark": "请输入医疗卡号进行余额查询"
          },{
            "id": "card2",
            "image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
            "title": "充值",
            "remark": "请输入医疗卡号进行充值",
          },{
            "id": "card3",
            "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
            "title": "退还",
            "remark": "请输入医疗卡号进行退还现金",
          }]
        })

      })
    </script>
    <!-- 卡片渲染事件 -->


    <style>
      #balance span{
        font-size: 16px;
        line-height: 30px;
        height: 30px;
        padding:10px;
      }
    </style>

    <!-- 卡片点击处理 -->
    <script>
      var c1 = 0;
      var c2 = 0;
      var c3 = 0;
      $(document).on("click","#card1",function(){
        $("#inputCard").css('display',"block");
        c1 = 1;
        c2 = 0;
        c3 = 0;
      });
      $(document).on("click","#inCard",function(){
        var card = $("#card").val();
        $.ajax({
          url: '/charge/getBalance',
          data: {'card': card},
          method: 'POST',
          dataType: 'json',
          success:function (data){
            $("#inputCard").css('display',"none");
            $("#yh_name").text(data.yh_name);
            $("#br_sex").text(data.br_sex);
            $("#br_card").text(data.br_card);
            $("#br_balance").text(data.br_balance);
            if(c1 === 1){
              $("#selectBalance").css('display',"block");
            }
            else if (c2 === 1){
              $("#updateBalance").css('display',"block");
            }
            else if (c3 === 1){
              $("#deleteBalance").css('display',"block");
            }
          }
        })
      });
      $(document).on("click","#card2",function(){
        $("#inputCard").css('display',"block");
        c1 = 0;
        c2 = 1;
        c3 = 0;
      });
      $(document).on("click","#card3",function(){
        $("#inputCard").css('display',"block");
        c1 = 0;
        c2 = 0;
        c3 = 1;
      });
      $(document).on("click","#inMoney",function(){
        var card = $("#br_card").text();
        var money = $("#money").val();
        $.ajax({
          url: '/charge/updateBalance',
          data: {'card': card,'money': money},
          method: 'GET',
          success:function (){
            alert("充值成功！");
            window.location.reload();
          }
        })
      });
      $(document).on("click","#reMoney",function(){
        var card = $("#br_card").text();
        $.ajax({
          url: '/charge/returnBalance',
          data: {'card': card},
          method: 'GET',
          success:function (){
            alert("退还成功！");
            window.location.reload();
          }
        })
      });
    </script>
    <!-- 卡片点击处理 -->

    <!-- 修改信息事件 -->
    <script>
      $("#edit").on('click',function(e){
        //打开窗口
        layer.open({
          type: 2,
          area: ['1000px', '600px'],
          fixed: false, //不固定
          maxmin: true,
          title:"个人信息",
          content: 'edit_information.html'
          // 3.父传子值
          //  success:function(layero, index){
          //       //关键在这，调用子的iframe的方法，进行传参,前两行固定写法
          //       var body = layer.getChildFrame('body', index);
          //       var iframeWin = window[layero.find('iframe')[0]['name']];
          //       var div=$(obj).text();
          //       iframeWin.childIframe(div);    //看这
          //   }
        });
      });

    </script>

 
  
</div>
</body>
</html>